import React from "react";

export default class RefsForm extends React.Component {
  constructor(props) {
    super(props);
    // 创建一个 ref 来存储 textInput 的 DOM 元素
    this.textRef = React.createRef();
    this.passwordRef = React.createRef();
    this.userRef = React.createRef();
    this.focusTextInput = this.focusTextInput.bind(this);
  }

  focusTextInput() {
    // 直接使用原生 API 使 text 输入框获得焦点
    // 注意：我们通过 "current" 来访问 DOM 节点
    console.log(this.textRef.current.value);
    this.passwordRef.current.focus();
    this.userRef.current.style.width = "300px";
  }

  render() {
    return (
      <>
        <h1>refs 实现非受控组件</h1>
        <input type="text" ref={this.textRef} />
        <input type="text" ref={this.passwordRef} />
        <input type="text" ref={this.userRef} />

        <input
          type="button"
          value="点击改变表单输入"
          onClick={this.focusTextInput}
        />
      </>
    );
  }
}
